<template>
    <div>
        <PageHeader />
        <PageNav />
        <div class="list">
            <div class="box">
                <div class="path">首页 / 全部</div>
                <div class="category">分类</div>
                <div class="detail">
                    <div>
                        <el-row>
                            <el-col :span="12" style="text-align:left;">
                                <el-button size="mini" type="info" @click="eventPriceSort('asc')">按价格升序</el-button>
                                <el-button size="mini" type="info" @click="eventPriceSort('desc')">按价格降序</el-button>
                            </el-col>
                            <el-col :span="12" style="text-align: right;">
                                <el-checkbox>备选项</el-checkbox>
                            </el-col>
                        </el-row>
                    </div>


                    <!--显示列表-->
                    <div style="margin-top:10px;">
                        <el-row>
                            <el-col :span="6" v-for="(o, index) in tableData" :key="index">
                                <el-card :body-style="{ padding: '0px' }">
                                    <img :src="'http://localhost:5286/' + o.coverImg" class="image" @click="enventGoDetail(o)">
                                    <div style="padding: 14px;">
                                        <span>{{ o.title }}</span>
                                        <div class="bottom clearfix">
                                            <span style="text-decoration: line-through;color:red;">原价：{{ o.martetPrice
                                            }}</span><span>售价：{{ o.salePrice }}</span>
                                            <el-button type="text" class="button">操作按钮</el-button>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>

                    <!--分页-->
                    <div style="margin-top:20px;">分页</div>
                </div>
            </div>
        </div>
        <PageCustom />
        <PageFooter />
    </div>
</template>



<script>


//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageCustom from '@/components/PageCustom.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {
    components:{
        //声明刚才我们引入的页面，是一个组件
        PageNav,PageHeader,PageCustom,PageFooter
    },
    data() {
        return {
            currentDate: new Date(),
            tableData: [],
            sort: {
                sortField: 'title',
                sortValue: 'asc'
            }
        };
    },
    mounted() {
        this.onloadData()
    },
    methods: {
        enventGoDetail(row){
            //这是直接拼接
            //this.$router.push('/detail?id='+id)

            //这是用路由拼接
            this.$router.push({path:'/detail',query:{id:row.id,name:'我是query参数'}  })

            //用路由参数
            //this.$router.push({name:'detail',params:{ row:row }  })

        },
        eventPriceSort(sortValue) {
            // //http://localhost:5286/goods?sortField=title&sortValue=asc&pageIndex=1&pageSize=10
            // let url='http://localhost:5286/goods?sortField=price&sortValue='+sortValue+'&pageIndex=1&pageSize=10'
            // this.$http.get(url).then(res => {
            //     console.log(res)
            //     if (res.data.code == 200) {
            //         this.tableData = res.data.data.items
            //     }
            // })
            this.sort.sortField = 'price'
            this.sort.sortValue = sortValue
            this.onloadData()
        },
        onloadData() {
            let url = 'http://localhost:5286/goods?sortField=' + this.sort.sortField + '&sortValue=' + this.sort.sortValue + '&pageIndex=1&pageSize=10'
            this.$http.get(url).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    this.tableData = res.data.data.items
                }
            })
        }
    }
}
</script>


<style scoped>

.category {
    background-color: white;
    border: 1px solid #dcdcdc;
    min-height: 200px;
    margin-bottom: 20px;
}

</style>